<template>
    <cl-crud ref="Crud">
        <cl-row>
            <cl-refresh-btn/>
            <cl-add-btn/>
            <cl-flex1/>
          <cl-search ref="Search" />
        </cl-row>

        <cl-row>
            <cl-table ref="Table"/>
        </cl-row>

        <cl-row>
            <cl-flex1/>
            <cl-pagination/>
        </cl-row>

        <!-- 新增、编辑 -->
        <cl-upsert ref="Upsert"/>
    </cl-crud>
</template>

<script lang="ts" name="crawler-group" setup>
import {setFocus, useCrud, useSearch, useTable, useUpsert} from "@cool-vue/crud";
import {useCool} from "/@/cool";
import {onMounted} from "vue";
import { useDict } from "/$/dict";

const { dict } = useDict();

const {service} = useCool();
// 获取指定类型数据
dict.refresh(["gType"]);

const Search = useSearch({
  items: [
    {
      label: "分类",
      prop: "type",
      component: {
        name: "el-select",
        props: {
          clearable: true,
          onChange(type) {
            Crud.value?.refresh({ type, page: 1 });
          },
        },
        options: dict.get("gType")
      },
    },
    {
      label: "关键字",
      prop: "keyWord",
      component: {
        name: "el-input",
        props: {
          clearable: true,
        },
      },
    }
  ],
});


// cl-crud
const Crud = useCrud({
    service: service.crawler.group,
    onRefresh(params, {render}) {
        service.crawler.group
            .page({
                ...params
            })
            .then((res) => {
                // 渲染数据
                render(res["list"], {
                    size: Number(res["pagination"].size),
                    page: Number(res["pagination"].page),
                    total: Number(res["pagination"].total)
                });
            });
    }
});

onMounted(() => {
    refresh({page: 1, size: 20});
});

function refresh(params?: any) {
    // console.log(JSON.stringify(params));
    Crud.value?.refresh(params);
}

// cl-upsert
const Upsert = useUpsert({
    dialog: {
        width: "800px"
    },

    items: [
        {
            prop: "type",
            label: "分类",
            required: true,
            component: {
                name: "el-select",
                options: dict.get("gType"),
            }
        },
        {
            prop: "name",
            label: "名称",
            required: true,
            component: {
                name: "el-input"
            }
        },

        {
            prop: "enName",
            label: "展示名称",
            required: true,
            component: {
                name: "el-input"
            }
        }
    ],
    plugins: [setFocus("name")]
});

// cl-table
const Table = useTable({
    contextMenu: ["refresh"],
    columns: [
        {
            type: "selection"
        },
        {
            prop: "type",
            label: "分类",
            width: 150,
            align: "left",
            showOverflowTooltip: true,
            dict: dict.get("gType")
        },
        {
            prop: "name",
            label: "名称",
            align: "left",
            width: 250,
            showOverflowTooltip: true
        },
        {
            prop: "enName",
            align: "left",
            label: "展示名称",
            width: 400
        },
        {
            prop: "createdAt",
            align: "left",
            label: "创建时间",
            width: 200
        },
        {
            label: "操作",
            type: "op",
            width: 180,
            buttons: ["info", "edit", "delete"]
        }
    ]
});
</script>
